body,html{
    font-family: Arial,  sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: inline-block;
}
.page{
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #65A192;
}
.panel{
    display: inline-block;
    position: relative;
}
.panel_visible{
    position: relative;
    overflow: hidden;
}
.panel_tetle{
    margin-top: .5em;
   margin-bottom: 1.2em;
}
.panel_content{
    padding: 20px;
    background-color: white;
    z-index: 10;
    position: relative;
}
.panel_content-overlay{
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
}
.panel_content.animate{
    animation: movePanel 2s forwards;
}
@keyframes movePanel{
 0%,30%{
     transform: translateX(0%);
 }   
 35%,100%{
    transform: translateX(-100%);
 }
}
.panel_content.animateOut{
    animation: movePanel 2s forwards;
}
@keyframes movePanelOut{
    0%,30%{
        transform: translateX(-100%);
    }  
    35%,100%{
        transform: translateX(0%);
     } 
}
.panel_back{
    position: absolute;
    z-index: 0;
    top: 50%;
    transform: translate(70%,-50%);
}
.panel_back.animate{
    animation: move 2s forwards;
}
@keyframes move{
    0%{
        transform: translate(70%,-50%);
        z-index: 0;
    }
    15%{
        transform: translate(140%,-50%);
        z-index: 0;
    }
    75%{
        transform: translate(120%,-50%);
        z-index: 0;
    }
    100%{
        transform: translate(-50%,-50%);
        z-index: 0;
    }
}
.panel_back.animateOut{
    transform: translate(-50%,-50%);
    animation: moveOut 2s forwards;
}
@keyframes moveOut{
    0%{
        transform: translate(-50%,-50%);
        z-index: 0;
    }
    15%{
        transform: translate(-120%,-50%);
        z-index: 10;
    }
    75%{
        transform: translate(140%,-50%);
        z-index: 10;
    }
    100%{
        transform: translate(70%,-50%);
        z-index: 0;
    }

}


.panel_img{
    width: 100%;
    display: block;
}
/*form*/
.form{
    box-sizing: border-box;
}
.form_label{
    display: block;
    color: #3D3D3D;
    font-weight: 600;
    margin-bottom: 5px;
}
.form_input{
    border-radius: 3px;
    background-color: #f2f2f2;
    box-shadow:  0px 2px 2px #D6D6D6;
    border: none;
    padding: 2%;
    margin-bottom: 15px;
    width: 250px;
    box-sizing: border-box;
    position: relative;
}
.form_input:focus{
    box-shadow: none;
    outline-color: #33A192;
}
.form_btn{
    margin-top: 1.2em;
    margin-bottom: 2em;
    display: block;
    width: 100%;
    background-color: #33A192;
    color: white;
    border: none;
    padding: .6em;
    text-transform: uppercase;font-weight: 500;
    font-weight: 1.1em;
    border-radius: 3px;
    cursor: pointer;
}
.form_toggle{
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 1.1em;
    box-sizing: border-box;
    border-bottom: 1px solid transparent;
    cursor: pointer;
}
.form_toggle:hover{
    border-bottom: 1px solid #33A192;
}
.form_toggle:focus{
    outline: none;
    border-bottom: 1px solid #33A192;
}
